<style include="settings-shared"></style>
<div id="darkModeEnablerDiv">
  <settings-toggle-button
      id="darkModeToggleButton"
      class="hr"
      pref="{{prefs.ash.dark_mode.enabled}}"
      label="[[getDarkModeOnOffLabel_(prefs.ash.dark_mode.enabled.value)]]"
      deep-link-focus-id$="[[Setting.kDarkModeOnOff]]">
  </settings-toggle-button>
</div>
<div id="darkModeThemedDiv">
  <div class="settings-box">
    <div class="settings-box-text start" aria-hidden="true">
      <div id="darkModeThemedLabel" class="label">
        $i18n{darkModeThemedRadioGroupTitle}
      </div>
      <div id="darkModeThemedSubLabel" class="secondary label">
        $i18n{darkModeThemedRadioGroupDescription}
      </div>
    </div>
  </div>
  <div class="list-frame">
    <settings-radio-group id="darkModeThemedRadioGroup"
        pref="{{prefs.ash.dark_mode.color_mode_themed}}"
        group-aria-label="$i18n{darkModeThemedRadioGroupTitle}"
        deep-link-focus-id$="[[Setting.kDarkModeThemed]]">
      <cr-radio-button id="darkModeThemedOn"
          name="true" class="list-item underbar"
          pref="[[prefs.ash.dark_mode.color_mode_themed]]"
          label="$i18n{darkModeThemedOn}">
      </cr-radio-button>
      <cr-radio-button id="darkModeThemedOff"
          name="false" class="list-item"
          pref="[[prefs.ash.dark_mode.color_mode_themed]]"
          label="$i18n{darkModeThemedOff}">
      </cr-radio-button>
    </settings-radio-group>
  </div>
</div>
